<template>
  <basic-container>
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="我发起的" name="1">
        <br/>
        <sign-start v-if="activeName === '1'"></sign-start>
      </el-tab-pane>
      <el-tab-pane label="我收到的" name="2">
        <br/>
        <sign-receive v-if="activeName === '2'"></sign-receive>
      </el-tab-pane>
      <el-tab-pane :label="'草稿'+'('+draftNum+')'" name="3">
        <br/>
        <sign-draft v-if="activeName === '3'"></sign-draft>
      </el-tab-pane>
      <el-tab-pane :label="'待我操作'+'('+operatedByMeNum+')'" name="4">
        <br/>
        <sign-operated-by-me v-if="activeName === '4'"></sign-operated-by-me>
      </el-tab-pane>
      <el-tab-pane :label="'待他人操作'+'('+operatedByOtherNum+')'" name="5">
        <br/>
        <sign-status v-if="activeName === '5'" :signStatus="3"></sign-status>
      </el-tab-pane>
<!--      <el-tab-pane label="已完成" name="6">-->
<!--        <br/>-->
<!--        <sign-status v-if="activeName === '6'" :signStatus="4"></sign-status>-->
<!--      </el-tab-pane>-->
    </el-tabs>
    <el-tabs>

    </el-tabs>
  </basic-container>
</template>

<script setup>
import {ref} from 'vue';
import SignReceive from './SignReceive.vue';
import SignStart from './SignStart.vue';
import SignDraft from './SignDraft.vue';
import SignStatus from './SignStatus.vue';
import SignOperatedByMe from './SignOperatedByMe.vue';
import {getSealSignNumByStatusApi, getSealSignNumOperatedByMeApi} from '../../../api/sign';
import {useStore} from 'vuex';

const activeName = ref('1')
const store = useStore()
const signSponsor = store.getters.userId

const handleClick = () => {
  getSealSignNumOperatedByMe()
  getSealSignNumByStatus()
}

const operatedByMeNum = ref(0)
/**
 * 获取待我操作的签署文件数量
 */
const getSealSignNumOperatedByMe = () => {
  getSealSignNumOperatedByMeApi(signSponsor)
      .then(res=>{
        let data = res.data.result
        operatedByMeNum.value = data
      })
}
getSealSignNumOperatedByMe()

const operatedByOtherNum = ref(0)
/**
 * 获取待他人操作的文件数量
 */
const getSealSignNumByStatus = () => {
  getSealSignNumByStatusApi(signSponsor,3)
      .then(res=>{
        let data = res.data.result
        operatedByOtherNum.value = data
      })
}
getSealSignNumByStatus()

/**
 * 获取草稿数量
 */
const draftNum = ref(0)
const getDraftNum = () => {
  getSealSignNumByStatusApi(signSponsor,0)
      .then(res=>{
        let data = res.data.result
        draftNum.value = data
      })
}
getDraftNum()

</script>

<style scoped>
/deep/ .el-card__body {
  margin: 10px 20px;
}
/deep/ .el-tabs__item.is-active{
  color: #1063f1;
}
/deep/ .el-tabs__active-bar{
  background-color: #1063f1;
  margin-left: -20px;
  padding: 0 20px;
}
/deep/ .el-tabs__item.is-top:nth-child(2){
  padding-left: 20px;
}
/deep/ .el-tabs__item:hover{
  color: #1063f1;
}
/deep/ .el-tabs__nav-wrap::after {
  background-color: #e6e6e6;
}
</style>
